<template>
  <div
    class="home"
    :key="pageKey"
    @touchstart="onTouchStart"
    @touchmove.prevent="() => {}"
    @touchend="onTouchEnd"
  >
    <transition name="page1">
      <div class="page1" v-if="page === 1">
        <img src="@/assets/imgs/bg-right.png" alt="" />
        <img src="@/assets/imgs/bg-1.png" alt="" />
        <img src="@/assets/imgs/bg-left.png" alt="" />
        <img src="@/assets/imgs/bg-bottom.png" alt="" />
        <img src="@/assets/imgs/bg-footer.png" alt="" />
        <img src="@/assets/imgs/flower.png" alt="" />
        <div class="content" style="text-align: center">
          <p
            ><span style="margin-left: 8%">新郎：陈廷红</span>
            <span style="margin-left: 10%">新娘：肖 燕</span></p
          >
          <p style="margin-left: 8%">2022年02月10日 &nbsp;&nbsp;&nbsp;12时00分</p>
          <p style="margin-left: 8%">隆昌市普润镇李氏农庄</p>
        </div>
      </div>
    </transition>
    <transition name="page2">
      <div class="page2" v-if="page === 2">
        <img src="@/assets/imgs/t-left.png" alt="" />
        <img src="@/assets/imgs/t-right.png" alt="" />
        <img src="@/assets/imgs/girl.png" alt="" />
        <img src="@/assets/imgs/boy.png" alt="" />
        <img src="@/assets/imgs/flower-left.png" alt="" />
        <img src="@/assets/imgs/flower.png" alt="" />
        <img src="@/assets/imgs/bg-left.png" alt="" />
        <img src="@/assets/imgs/bg-right.png" alt="" />
        <img src="@/assets/imgs/bg-footer.png" alt="" />
        <img src="@/assets/imgs/liao.jpeg" alt="" />
        <div class="content">
          <p>2022年2月10日 12:00</p>
          <p>农历正月初十 星期四</p>
          <p>我们在</p>
          <p>隆昌县普润镇李氏农庄</p>
          <p>恭候您的光临</p>
        </div>
      </div>
    </transition>
    <transition name="page3">
      <div class="page4" v-if="page === 3">
        <div class="page4-1"> 倾情愿得一心人, 祸福白首不相离。 </div>
        <div class="imgs">
          <el-carousel>
            <el-carousel-item v-for="(e, i) of imgUrls" :key="i">
              <img :key="i" :src="e" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="page4-2">
          <p>在未知的岁月里</p>
          <p>无论风吹雨打 我们牵手一起走过</p>
          <p>两颗相爱的心 慢慢变老</p>
        </div>
      </div>
    </transition>
    <div class="page3" v-if="page === 4">
      <img src="@/assets/imgs/t-left.png" alt="" />
      <img src="@/assets/imgs/t-right.png" alt="" />
      <img src="@/assets/imgs/flower-left.png" alt="" />
      <img src="@/assets/imgs/flower.png" alt="" />
      <img src="@/assets/imgs/bg-left.png" alt="" />
      <img src="@/assets/imgs/bg-right.png" alt="" />
      <img src="@/assets/imgs/bg-footer.png" alt="" />
      <div class="map" id="contain"> </div>
      <div class="nav">
        <div class="anav" @touchstart="openM('amap')"> 高德导航 </div>
        <div class="bnav" @touchstart="openM('bmap')"> 百度导航 </div>
      </div>
      <div class="date">
        <div>等你来</div>
        <div class="lg">02.10</div>
        <div>Welcome To Our Wedding</div>
      </div>
      <div class="date-end">
        <div>离见证时刻还有</div>
        <div>
          <span>{{ date.day }}</span
          >天<span>{{ date.hour }}</span
          >时<span>{{ date.minute }}</span
          >分<span>{{ date.second }}</span
          >秒
        </div>
      </div>
    </div>
    <img src="@/assets/imgs/arrow.png" alt="" ref="arrowRef" v-if="page < 4" class="arrow" />
    <img src="@/assets/imgs/music.png" alt="" class="music rotate" />
    <div style="position: absolute; bottom: 0; opacity: 0; z-index: -1">
      <audio :src="audioUrl" id="myAudio" ref="audioRef" loop autoplay></audio>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, watch, reactive, nextTick, onUnmounted } from 'vue';
  import { useStore } from 'vuex';
  import { openMap } from '@/util/map';
  import type { Position } from '@/util/map';
  import axios from 'axios';
  import audioUrl from '@/assets/mp3/jtnyjgw.mp3';
  const modules = import.meta.glob('../assets/imgs/our/*.jpeg');
  const imgUrls = ref<any[]>([]);
  async function getImgUrls() {
    let arr = [];
    for (let key in modules) {
      const url = (await modules[key]()).default;
      arr.push(url);
    }
    console.log(arr);
    imgUrls.value = arr;
  }
  getImgUrls();
  const store = useStore();
  const page = ref(1);
  const arrowRef = ref();
  const screenY = ref(0);
  const pageKey = ref(0);
  const startXY = reactive<any>({});
  const endXY = reactive<Position>({
    lng: 105.29171,
    lat: 29.420744,
    city: '隆昌市普润镇李氏农庄'
  });
  const audioRef = ref();
  const date = reactive({
    day: 0,
    hour: 0,
    minute: 0,
    second: 0
  });
  const timer = setInterval(() => {
    const num = +new Date('2022/02/10 12:00') - Date.now();
    date.day = Math.floor(num / 1000 / 60 / 60 / 24);
    date.hour = Math.floor((num - date.day * 1000 * 60 * 60 * 24) / 1000 / 60 / 60);
    date.minute = Math.floor(
      (num - date.day * 1000 * 60 * 60 * 24 - date.hour * 1000 * 60 * 60) / 1000 / 60
    );
    date.second = Math.floor(
      (num -
        date.day * 1000 * 60 * 60 * 24 -
        date.hour * 1000 * 60 * 60 -
        date.minute * 60 * 1000) /
        1000
    );
  }, 1000);
  onUnmounted(() => {
    clearInterval(timer);
  });
  function openM(val) {
    let Url = '';
    switch (val) {
      case 'amap':
        Url = `https://uri.amap.com/navigation?from=&to=${endXY.lng},${endXY.lat},${endXY.city}&callnative=1`;
        break;
      case 'bmap':
        Url = `http://api.map.baidu.com/direction?origin=&destination=latlng:${endXY.lat},${endXY.lng}|name:${endXY.city}&mode=driving&origin_region=${startXY.city}&destination_region=${endXY.city}&output=html&src=webapp.baidu.openAPIdemo`;
        break;
    }
    location.href = Url;
  }
  function onTouchStart(e: any) {
    audioRef.value?.play();
    screenY.value = e.changedTouches[0].clientY;
  }
  function onTouchEnd(e: any) {
    if (screenY.value - e.changedTouches[0].clientY > 100 && page.value < 4) {
      page.value += 1;
    } else if (screenY.value - e.changedTouches[0].clientY < -100 && page.value > 1) {
      page.value -= 1;
    }
  }
  watch(page, (v) => {
    switch (v) {
      case 1:
        page1Animal();
        break;
      case 2:
        page2Animal();
        break;
      case 4:
        page3Animal();
        setTimeout(() => {
          loadMap();
        });
        break;
      default:
        break;
    }
  });
  function page1Animal() {
    setTimeout(() => {
      const tl = new TimelineMax();
      tl.add(
        TweenLite.from('.page1>img:nth-child(1)', 0.5, {
          right: -100,
          opacity: 0
        })
      );
      tl.add(
        TweenLite.from('.page1>img:nth-child(2)', 0.5, {
          scale: 0.1,
          opacity: 0
        })
      );
      tl.add(
        TweenLite.from('.page1>img:nth-child(3)', 0.5, {
          left: -100,
          opacity: 0
        })
      );
      tl.add(
        TweenLite.from('.page1>img:nth-child(4)', 0.5, {
          top: '100vh',
          opacity: 0
        })
      );
      tl.add(
        TweenLite.from('.page1>img:nth-child(6)', 0.5, {
          right: -100,
          opacity: 0
        })
      );
      tl.add(
        TweenLite.from('.page1>img:nth-child(5)', 0.5, {
          left: '-100vh',
          opacity: 0
        })
      );
      tl.add(
        TweenLite.from('.page1>.content', 0.5, {
          scale: 0
        })
      );
    });
  }
  function page2Animal() {
    setTimeout(() => {
      TweenMax.from('.page2>img:nth-child(1)', 2, { x: -200 });
      TweenMax.from('.page2>img:nth-child(2)', 2, { right: -200 });
      TweenMax.staggerFrom('.page2>img:nth-child(3)', 2, { x: 200 });
      TweenMax.staggerFrom('.page2>img:nth-child(4)', 2, { left: -200 });
      TweenMax.from('.page2>img:nth-child(5)', 2, { left: -200 });
      TweenMax.from('.page2>img:nth-child(6)', 2, { right: -200 });
      TweenMax.from('.page2>img:nth-child(7)', 2, { left: -200 });
      TweenMax.from('.page2>img:nth-child(8)', 2, { right: -200 });
      TweenMax.from('.page2>img:nth-child(9)', 2, { bottom: 0 });
      TweenMax.from('.page2>img:nth-child(10)', 2, { scale: 0, delay: 2 });
      TweenMax.from('.page2>.content', 2, { scale: 0 });
    });
  }
  function page3Animal() {
    setTimeout(() => {
      console.log(page.value);
      TweenMax.from('.page3>img:nth-child(1)', 1, { x: -200 });
      TweenMax.from('.page3>img:nth-child(2)', 1, { right: -200 });
      TweenMax.from('.page3>img:nth-child(3)', 1, { left: -200 });
      TweenMax.from('.page3>img:nth-child(4)', 1, { right: -200 });
      TweenMax.from('.page3>img:nth-child(5)', 1, { left: -200 });
      TweenMax.from('.page3>img:nth-child(6)', 1, { right: -200 });
      TweenMax.from('.page3>img:nth-child(7)', 1, { bottom: 0 });
      TweenMax.from('.page3>.content', 1, { scale: 0 });
    });
  }
  function loadMap() {
    var map = new AMap.Map('contain', {
      resizeEnable: true, // 调整缩放大小
      center: [105.29171, 29.420744],
      // viewMode: "3D", // 使用3D视图
      // layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
      zooms: [1, 18],
      zoom: 17
    });
    var marker = new AMap.Marker({
      map: map,
      position: [105.29171, 29.420744] //点所在位置
    });
    document.getElementById('contain')!.addEventListener('click', closeInfoWindow);
    AMap.plugin(
      [
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.MapType',
        'AMap.Geolocation',
        'AMap.Driving'
      ],
      function () {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        // map.addControl(new AMap.ToolBar());

        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale());
        // map.addControl(new AMap.ToolBar());
        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        // map.addControl(new AMap.OverView({isOpen: true}));

        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        // map.addControl(new AMap.MapType());

        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(new AMap.Geolocation());
        // var drivingOption = {
        //   policy: AMap.DrivingPolicy.LEAST_TIME,
        //   map: map
        // };
        // var driving = new AMap.Driving(drivingOption); //构造驾车导航类
        // //根据起终点坐标规划驾车路线
        // driving.search(
        //   [{ keyword: '北京站' }, { keyword: '北京大学' }],
        //   function (status: any, result: any) {
        //     button!.onclick = function () {
        //       console.log(11)
        //       driving.searchOnAMAP({
        //         origin: result.origin,
        //         destination: result.destination
        //       });
        //     };
        //   }
        // );
      }
    );

    //关闭信息窗体
    function closeInfoWindow() {
      map.clearInfoWindow();
    }
  }
  onMounted(() => {
    setInterval(() => {
      if (!arrowRef.value) return;
      if (!arrowRef.value.style.bottom || arrowRef.value.style.bottom === '5px')
        arrowRef.value.style.bottom = '20px';
      else {
        arrowRef.value.style.bottom = '5px';
      }
    }, 1000);
    page1Animal();
  });
</script>

<style scoped lang="less">
  @gold: rgb(255, 246, 144);
  .home {
    width: 100vw;
    height: 100vh;
    color: @gold;
    background: url('@/assets/imgs/bg.jpg') no-repeat;
    background-size: cover;
    position: relative;
    & > div {
      width: 100%;
      height: 100%;
    }
    .page1 {
      & > img {
        position: absolute;
        &:nth-child(1) {
          right: 0;
          top: 10vh;
          width: 40%;
        }
        &:nth-child(2) {
          left: 50%;
          transform: translate(-50%);
          top: 12vh;
          width: 90%;
          z-index: 1;
        }
        &:nth-child(3) {
          left: 0;
          bottom: 30vh;
          width: 40%;
        }
        &:nth-child(4) {
          left: 50%;
          transform: translate(-55%);
          top: 43vh;
          z-index: 0;
        }
        &:nth-child(5) {
          left: 0;
          bottom: 6vh;
          width: 100%;
        }
        &:nth-child(6) {
          right: 0;
          bottom: 15vh;
          width: 40%;
        }
      }
      .content {
        width: 70%;
        position: absolute;
        left: 0;
        bottom: 13vh;
        color: rgb(255, 246, 144);
        left: 10%;
        p {
          margin-top: 13px;
        }
      }
    }
    .page2 {
      & > img {
        position: absolute;
        &:nth-child(1) {
          left: 0;
          top: -20px;
          width: 30%;
        }
        &:nth-child(2) {
          right: 0;
          top: 0;
          width: 60%;
        }
        &:nth-child(3) {
          left: 50%;
          top: 18.5vh;
          width: 40%;
          z-index: 2;
          transform: translateX(-85%);
        }
        &:nth-child(4) {
          left: 50%;
          top: 20vh;
          transform: translateX(-14%);
          width: 45%;
          z-index: 1;
        }
        &:nth-child(5) {
          left: 0;
          top: 25vh;
          width: 30%;
        }
        &:nth-child(6) {
          right: 0;
          bottom: 15vh;
          width: 40%;
        }
        &:nth-child(7) {
          left: 0;
          bottom: 23vh;
          width: 30%;
        }
        &:nth-child(8) {
          right: 0;
          top: 42vh;
          width: 35%;
        }
        &:nth-child(9) {
          left: 0;
          bottom: 6vh;
        }
        &:nth-child(10) {
          left: 12%;
          top: 20vh;
          width: 76%;
          z-index: 10 !important;
        }
      }
      .content {
        position: absolute;
        width: 100%;
        top: 58%;
        text-align: center;
        color: rgb(255, 246, 144);
        p {
          margin-top: 10px;
        }
      }
    }
    .page3 {
      & > img {
        position: absolute;
        &:nth-child(1) {
          left: 0;
          top: -20px;
          width: 30%;
        }
        &:nth-child(2) {
          right: 0;
          top: 0;
          width: 60%;
        }
        &:nth-child(3) {
          left: 0;
          top: 25vh;
          width: 30%;
        }
        &:nth-child(4) {
          right: 0;
          bottom: 15vh;
          width: 40%;
        }
        &:nth-child(5) {
          left: 0;
          bottom: 23vh;
          width: 30%;
        }
        &:nth-child(6) {
          right: 0;
          top: 42vh;
          width: 35%;
        }
        &:nth-child(7) {
          left: 0;
          bottom: 6vh;
        }
      }
      .map {
        position: absolute;
        width: 70%;
        height: 30%;
        top: 35%;
        left: 15%;
        text-align: center;
        color: rgb(255, 246, 144);
        p {
          margin-top: 10px;
        }
      }
      .date {
        font-size: 16px;
        padding: 0px 10px;
        border-left: 2px solid @gold;
        position: absolute;
        top: 17vh;
        left: 15%;
        .lg {
          font-size: 40px;
          font-weight: bold;
        }
      }
      .date-end {
        position: absolute;
        bottom: 19vh;
        left: 0%;
        width: 100%;
        text-align: center;
        & > div:first-child {
          font-size: 13px;
        }
        & > div:last-child {
          font-size: 18px;
          margin-top: 20px;
          letter-spacing: 2px;
          span {
            font-size: 25px;
            margin: 0 2px;
          }
        }
      }
    }
    .page4 {
      .imgs {
        position: absolute;
        width: 70vw;
        top: 20%;
        left: 15%;
        img {
          width: 100%;
        }
        :deep(.el-carousel__button) {
          height: 5px;
          width: 5px;
          border-radius: 50%;
        }
      }
      &-1 {
        position: absolute;
        top: 15%;
        width: 70%;
        left: 15%;
      }
      &-2 {
        position: absolute;
        top: 70%;
        width: 70%;
        left: 15%;
        p {
          margin-top: 5px;
        }
      }
    }
    .arrow {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: 10%;
      transition: all 1s;
    }
    @keyframes rotate {
      0% {
        transform: rotate(0);
      }
      50% {
        transform: rotate(180deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .rotate {
      transition: 0.5s;
      animation: rotate 10s linear infinite; /*开始动画后无限循环，用来控制rotate*/
    }
    .music {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 7%;
    }
  }
  .page1-enter-from,
  .page1-leave-to {
    opacity: 0;
    transform: translateY(-100vh);
  }
  .page1-leave-active {
    transition: all 0.5s;
  }

  .page1-leave-from,
  .page1-enter-to {
    opacity: 1;
  }
  .page2-enter-from,
  .page2-leave-to {
    opacity: 0;
    transform: translateY(-100vh);
  }
  .page2-leave-active {
    transition: all 0.5s;
  }

  .page2-leave-from,
  .page2-enter-to {
    opacity: 1;
  }
  .nav {
    color: @gold;
    top: 55vh;
    right: 17vw;
    position: absolute;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    & > div {
      padding: 5px 10px;
      border-radius: 3px;
      background: #f56c6c;
    }
  }
  .anav {
    margin-bottom: 5px;
  }
</style>
